<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>flv手机/pc直播</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      html,
      body {
        width: 100%;
        height: 100%;
      }

      #container {
        width: 100vw;
        height: 56.25vw;
      }

      #main {
        font-size: 1.2rem;
        background: #0170fe;
        color: #fff;
        text-align: center;
        padding: 0.5rem;
      }

      #player {
        display: none;
        width: 100%;
        background: black;
      }
      .player-container {
        position: relative;
      }

      .player-container.mobilefull {
        position: relative;
        width: 100vh;
        height: 100vw;
        background: red;
        transform: rotate(90deg) translateY(-100vw);
        transform-origin: left top;
      }

      .player-container.mobilefull #player {
        height: 100%;
      }

      .fullscreen-btn {
        position: absolute;
        right: 0;
        bottom: 0;
        font-size: 1.2rem;
        background: #0170fe;
        color: #fff;
        text-align: center;
        padding: 0.5rem;
      }
    </style>
  </head>
  <body>
    <div>
      <div id="main">请求直播地址</div>
    </div>

    <div class="player-container" id="full-container">
      <div class="fullscreen-btn" id="full">toggle</div>
      <div style="width: 100%; height: 100%">
        <div style="width: 100vw; height: 100vh" id="player"></div>
      </div>
    </div>

    <script src="./renderer.js"></script>

    <script src="./env.example.js"></script>
    <script src="./axios.min.js"></script>

    <script>
      // function full(ele) {
      //   if (ele.requestFullscreen) {
      //     ele.requestFullscreen();
      //   } else if (ele.mozRequestFullScreen) {
      //     ele.mozRequestFullScreen();
      //   } else if (ele.webkitRequestFullscreen) {
      //     ele.webkitRequestFullscreen();
      //   } else if (ele.msRequestFullscreen) {
      //     ele.msRequestFullscreen();
      //   }
      // }
      const $cont = document.getElementById("full-container");
      let flag = true;
      document.getElementById("full").addEventListener("click", () => {
        if (flag) {
          $cont.classList.add("mobilefull");
          flag = false;
        } else {
          $cont.classList.remove("mobilefull");
          flag = true;
        }
        // full($cont);
      });

      async function main() {
        const token = await getToken();
        const device = await checkDevice(token);
        if (device.is_online !== "Y") {
          alert("当前设备不在线");
          return;
        }
        await requestStartLive(token);
        const address = await getStreamingAddress(token);
        console.log(address);
        // 注意
        // 因为浏览器安全限制 不管是http还是https 都能使用sflv

        const $video = document.getElementById("player");
        $video.style.display = "block";

        const player = new window.Jessibuca({
          container: document.getElementById("player"),
          decoder: "./ff_wasm.js", // 这里注意了 如果你的ff.js文件目录不在当前目录请填写如 /ff.js 这样的路径
          videoBuffer: 5, //建议设置值（和画面流畅度有关）
        });

        player.onLoad = function () {
          player.play(address.sflv);
        };

        document.getElementById("main").style.display = "none";
      }

      function createFormData(values) {
        // 只2层遍历
        const formData = new FormData();
        Object.keys(values).forEach((key) => {
          const dt = values[key];
          if (Array.isArray(dt)) {
            dt.forEach((item) => {
              formData.append(`${key}[]`, item);
            });
          } else {
            formData.append(key, dt);
          }
        });
        return formData;
      }

      document.getElementById("main").addEventListener("click", () => {
        main();
      });

      function getToken() {
        return axios({
          url: "https://api.morecanai.com/client/v1/obtain-access-token",
          method: "post",
          data: createFormData({
            client_id: CLIENT_ID,
            client_secret: CLIENT_SECRET,
          }),
        }).then(function (response) {
          const token = response.data.access_token;
          return token;
        });
      }

      function requestStartLive(token) {
        axios({
          url: `https://api.morecanai.com/client/v1/camera/${DEVICE}/camera-message`,
          method: "post",
          data: createFormData({
            action: "start_streaming",
          }),
          headers: {
            "Content-Type": "multipart/form-data",
            Authorization: "Bearer " + token,
          },
        }).then(function (response) {
          // console.log(response);
        });
      }

      function getStreamingAddress(token) {
        return axios({
          url: `https://api.morecanai.com/client/v1/camera/streaming-address`,
          method: "post",
          data: createFormData({
            camer_serial_numbers: DEVICE,
          }),
          headers: {
            Authorization: "Bearer " + token,
          },
        }).then(function (response) {
          return response.data[DEVICE];
        });
      }

      function checkDevice(token) {
        return axios({
          url: `https://api.morecanai.com/client/v1/camera/${DEVICE}/show`,
          method: "get",
          headers: {
            Authorization: "Bearer " + token,
          },
        }).then(function (response) {
          return response.data;
        });
      }
    </script>
  </body>
</html>
